<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>教练预约</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="reserveForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">学员姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="studentName" required lay-verify="required" placeholder="请输入姓名"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" required lay-verify="required|phone" placeholder="请输入手机号"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">驾照类型</label>
                    <div class="layui-input-block">
                        <select name="licenseType" lay-verify="required">
                            <option value="">请选择驾照类型</option>
                            <option value="C1">C1</option>
                            <option value="C2">C2</option>
                            <option value="B1">B1</option>
                            <option value="B2">B2</option>
                            <option value="A1">A1</option>
                            <option value="A2">A2</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">起始时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="startTime" id="startTime" required lay-verify="required"
                               placeholder="请选择起始时间" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="endTime" id="endTime" required lay-verify="required"
                               placeholder="请选择结束时间" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="submitForm">立即预约</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>layui.use(['form', 'laydate'], function () {
    //获取url 请求参数
    let parser = new URL(window.location.href);
    console.log(parser.searchParams)
    let id = parser.searchParams.get("id");

    var form = layui.form;
    var laydate = layui.laydate;

    // 初始化起始时间选择器
    laydate.render({
        elem: '#startTime',
        type: 'datetime',
        min: 0,
        format: 'yyyy-MM-dd HH:mm:ss'
    });

    // 初始化结束时间选择器
    laydate.render({
        elem: '#endTime',
        type: 'datetime',
        min: 0,
        format: 'yyyy-MM-dd HH:mm:ss'
    });

    // 表单提交
    form.on('submit(submitForm)', function (data) {
        layer.confirm('确定要预约吗?', function (index) {
            data.field.coachId = id; // 添加教练ID到提交数据中
            // 实际项目中这里应该发送AJAX请求
           //发送layui ajax 请求
            fetch('/ljk/coach/insertReserve', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data.field)
            }).then(res => res.json())
            .then(res => {
                if (res.code === 0) {
                    layer.msg('预约成功', {icon: 1});
                    // 清空表单
                    form.val('reserveForm', {
                        'studentName': '',
                        'phone': '',
                        'licenseType': '',
                        'startTime': '',
                        'endTime': ''
                    });

                    if (window.parent) {
                        window.parent.close();
                    }

                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
            ).catch(error => {
                layer.msg('预约失败，请稍后再试', {icon: 2});
            });


            // $.ajax({
            //     url: '/ljk/coach/insertReserve',
            //     type: 'POST',
            //     data: data.field,
            //     contentType: 'application/json',
            //     success: function (res) {
            //         if (res.code === 0) {
            //             layer.msg('预约成功', {icon: 1});
            //             // 清空表单
            //             form.val('reserveForm', {
            //                 'studentName': '',
            //                 'phone': '',
            //                 'licenseType': '',
            //                 'startTime': '',
            //                 'endTime': ''
            //             });
            //         } else {
            //             layer.msg(res.msg, {icon: 2});
            //         }
            //     },
            //     error: function () {
            //         layer.msg('预约失败，请稍后再试', {icon: 2});
            //     }
            // });
            // layer.close(index);
        });
        return false;
    });
});
</script>
</body>
</html>
